<template>
	<view class="content">
		<view class="cardContent">
			<view class="innerContent">
				<view class="tip" :style="{Top: (CustomBar )+ 'rpx'}">
					凭直觉抽取1张牌
				</view>
				<view class="cardView">
					<view data-id="0" class="poke" :class="{'select' : select.indexOf(0) != -1}"
						:style="select.indexOf(0) != -1 ? select_style : style0" @tap="selectThis(0)" style=""></view>
					<view data-id="1" class="poke" :class="{'select' : select.indexOf(1) != -1}"
						:style="select.indexOf(1) != -1 ? select_style : style1" @tap="selectThis(1)" style=""></view>
					<view data-id="2" class="poke" :class="{'select' : select.indexOf(2) != -1}"
						:style="select.indexOf(2) != -1 ? select_style :style2" @tap="selectThis(2)" style=""></view>
					<view data-id="3" class="poke" :class="{'select' : select.indexOf(3) != -1}"
						:style="select.indexOf(3) != -1 ? select_style : style3" @tap="selectThis(3)" style=""></view>
					<view data-id="4" class="poke" :class="{'select' : select.indexOf(4) != -1}"
						:style="select.indexOf(4) != -1 ? select_style : style4" @tap="selectThis(4)" style=""></view>
					<view data-id="5" class="poke" :class="{'select' : select.indexOf(5) != -1}"
						:style="select.indexOf(5) != -1 ? select_style : style5" @tap="selectThis(5)" style="">
					</view>
					<view data-id="6" class="poke" :class="{'select' : select.indexOf(6) != -1}"
						:style="select.indexOf(6) != -1 ? select_style : style6" @tap="selectThis(6)" style="">
					</view>
					<view data-id="7" class="poke" :class="{'select' : select.indexOf(7) != -1}"
						:style="select.indexOf(7) != -1 ? select_style : style7" @tap="selectThis(7)" style="">
					</view>
					<view data-id="8" class="poke" :class="{'select' : select.indexOf(8) != -1}"
						:style="select.indexOf(8) != -1 ? select_style : style8" @tap="selectThis(8)" style="">
					</view>
					<view data-id="9" class="poke" :class="{'select' : select.indexOf(9) != -1}"
						:style="select.indexOf(9) != -1 ? select_style : style9" @tap="selectThis(9)" style="">
					</view>
					<view data-id="10" class="poke" :class="{'select' : select.indexOf(10) != -1}"
						:style="select.indexOf(10) != -1 ? select_style : style10" @tap="selectThis(10)" style="">
					</view>
					<view data-id="11" class="poke" :class="{'select' : select.indexOf(11) != -1}"
						:style="select.indexOf(11) != -1 ? select_style : style11" @tap="selectThis(11)" style="">
					</view>
					<view data-id="12" class="poke" :class="{'select' : select.indexOf(12) != -1}"
						:style="select.indexOf(12) != -1 ? select_style : style12" @tap="selectThis(12)" style="">
					</view>
					<view data-id="13" class="poke" :class="{'select' : select.indexOf(13) != -1}"
						:style="select.indexOf(13) != -1 ? select_style : style13" @tap="selectThis(13)" style="">
					</view>
					<view data-id="14" class="poke" :class="{'select' : select.indexOf(14) != -1}"
						:style="select.indexOf(14) != -1 ? select_style : style14" @tap="selectThis(14)" style="">
					</view>
					<view data-id="15" class="poke" :class="{'select' : select.indexOf(15) != -1}"
						:style="select.indexOf(15) != -1 ? select_style : style15" @tap="selectThis(15)" style="">
					</view>
					<view data-id="16" class="poke" :class="{'select' : select.indexOf(16) != -1}"
						:style="select.indexOf(16) != -1 ? select_style : style16" @tap="selectThis(16)" style="">
					</view>
					<view data-id="17" class="poke" :class="{'select' : select.indexOf(17) != -1}"
						:style="select.indexOf(17) != -1 ? select_style : style17" @tap="selectThis(17)" style="">
					</view>
					<view data-id="18" class="poke" :class="{'select' : select.indexOf(18) != -1}"
						:style="select.indexOf(18) != -1 ? select_style : style18" @tap="selectThis(18)" style="">
					</view>
					<view data-id="19" class="poke" :class="{'select' : select.indexOf(19) != -1}"
						:style="select.indexOf(19) != -1 ? select_style : style19" @tap="selectThis(19)" style="">
					</view>
					<view data-id="20" class="poke" :class="{'select' : select.indexOf(20) != -1}"
						:style="select.indexOf(20) != -1 ? select_style : style20" @tap="selectThis(20)" style="">
					</view>
					<view data-id="21" class="poke" :class="{'select' : select.indexOf(21) != -1}"
						:style="select.indexOf(21) != -1 ? select_style : style21" @tap="selectThis(21)" style="">
					</view>
					<view data-id="22" class="poke" :class="{'select' : select.indexOf(22) != -1}"
						:style="select.indexOf(22) != -1 ? select_style : style22" @tap="selectThis(22)" style="">
					</view>
					<view data-id="23" class="poke" :class="{'select' : select.indexOf(23) != -1}"
						:style="select.indexOf(23) != -1 ? select_style : style23" @tap="selectThis(23)" style="">
					</view>
					<view data-id="24" class="poke" :class="{'select' : select.indexOf(24) != -1}"
						:style="select.indexOf(24) != -1 ? select_style : style24" @tap="selectThis(24)" style="">
					</view>
					<view data-id="25" class="poke" :class="{'select' : select.indexOf(25) != -1}"
						:style="select.indexOf(25) != -1 ? select_style : style25" @tap="selectThis(25)" style="">
					</view>
					<view data-id="26" class="poke" :class="{'select' : select.indexOf(26) != -1}"
						:style="select.indexOf(26) != -1 ? select_style : style26" @tap="selectThis(26)" style="">
					</view>
					<view data-id="27" class="poke" :class="{'select' : select.indexOf(27) != -1}"
						:style="select.indexOf(27) != -1 ? select_style : style27" @tap="selectThis(27)" style="">
					</view>
					<view data-id="28" class="poke" :class="{'select' : select.indexOf(28) != -1}"
						:style="select.indexOf(28) != -1 ? select_style : style28" @tap="selectThis(28)" style="">
					</view>
					<view data-id="29" class="poke" :class="{'select' : select.indexOf(29) != -1}"
						:style="select.indexOf(29) != -1 ? select_style : style29" @tap="selectThis(29)" style="">
					</view>
					<view data-id="30" class="poke" :class="{'select' : select.indexOf(30) != -1}"
						:style="select.indexOf(30) != -1 ? select_style : style30" @tap="selectThis(30)" style="">
					</view>
					<view data-id="31" class="poke" :class="{'select' : select.indexOf(31) != -1}"
						:style="select.indexOf(31) != -1 ? select_style : style31" @tap="selectThis(31)" style="">
					</view>
					<view data-id="32" class="poke" :class="{'select' : select.indexOf(32) != -1}"
						:style="select.indexOf(32) != -1 ? select_style : style32" @tap="selectThis(32)" style="">
					</view>
					<view data-id="33" class="poke" :class="{'select' : select.indexOf(33) != -1}"
						:style="select.indexOf(33) != -1 ? select_style : style33" @tap="selectThis(33)" style="">
					</view>
					<view data-id="34" class="poke" :class="{'select' : select.indexOf(34) != -1}"
						:style="select.indexOf(34) != -1 ? select_style : style34" @tap="selectThis(34)" style="">
					</view>
					<view data-id="35" class="poke" :class="{'select' : select.indexOf(35) != -1}"
						:style="select.indexOf(35) != -1 ? select_style : style35" @tap="selectThis(35)" style="">
					</view>
					<view data-id="36" class="poke" :class="{'select' : select.indexOf(36) != -1}"
						:style="select.indexOf(36) != -1 ? select_style : style36" @tap="selectThis(36)" style="">
					</view>
					<view data-id="37" class="poke" :class="{'select' : select.indexOf(37) != -1}"
						:style="select.indexOf(37) != -1 ? select_style : style37" @tap="selectThis(37)" style="">
					</view>
					<view data-id="38" class="poke" :class="{'select' : select.indexOf(38) != -1}"
						:style="select.indexOf(38) != -1 ? select_style : style38" @tap="selectThis(38)" style="">
					</view>

					<view class="taro-img cardImg" :class="select_img">
						<image class="taro-img__mode-scaletofill" :src="getDynamicImagePath()" mode="widthFix" :style="imageStyle">
						</image>
					</view>
					<view class="cardRes">
						<view class="resItem" :class="active" @click="goDetail">
							<view class="resItemTitle">
								<!-- 感情发展建议 -->
								今日运势
							</view>
							<view class="resItemBg">
							</view>
							<view class="resItemName" v-if="isFlag === -1">
								{{ select_card.title }}<br>逆位
							</view>
							<view class="resItemName" v-if="isFlag === 1">
								{{ select_card.title }}<br>正位
							</view>
							<!-- <view class="isFlag" style="margin-top: 5px; color: white; font-size: 16px;">
								{{ select_card.title }}
							</view> -->
							
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// imageStyle: 'transform: scaleY(-1);',
				imageStyle:'',
				isFlag:1,
				kw: '', //用户提问的问题
				title: '',
				data: '',
				select_cards: [],
				select_card: {},
				select_pic: "",
				select_idx: -1,
				destiny_points: [], //随机数结果集
				active: '', //激活1
				select_img: '', //选项1
				select: [],
				xipaiAudioctx: null,
				clickAudioctx: null,
				select_style: 'z-index: 80; top: 20%; transform: translate(-45%) rotate(0deg) scale(1.5) rotateY(0deg); animation-delay: 0.4s;',
				style0: 'z-index: 0; top: 0; left: calc(50% - 175px); transform: rotate(-180deg); animation-delay: 1s;',
				style1: 'z-index: 1; top: 0; left: calc(50% - 150px); transform: rotate(-180deg); animation-delay: 1.05s;',
				style2: 'z-index: 2; top: 0; left: calc(50% - 125px); transform: rotate(-180deg); animation-delay: 1.1s;',
				style3: 'z-index: 3; top: 0; left: calc(50% - 100px); transform: rotate(-180deg); animation-delay: 1.15s;',
				style4: 'z-index: 4; top: 0; left: calc(50% - 75px); transform: rotate(-180deg); animation-delay: 1.2s;',
				style5: 'z-index: 5; top: 0; left: calc(50% - 50px); transform: rotate(-180deg); animation-delay: 1.25s;',
				style6: 'z-index: 6; top: 0; left: calc(50% - 25px); transform: rotate(-180deg); animation-delay: 1.3s;',
				style7: 'z-index: 7; top: 0; left: calc(50% - 0px); transform: rotate(-180deg); animation-delay: 1.35s;',
				style8: 'z-index: 8; top: 0; left: calc(50% + 25px); transform: rotate(-180deg); animation-delay: 1.4s;',
				style9: 'z-index: 9; top: 0; left: calc(50% + 50px); transform: rotate(-180deg); animation-delay: 1.45s;',
				style10: 'z-index: 10; top: 0; left: calc(50% + 75px); transform: rotate(-180deg); animation-delay: 1.5s;',
				style11: 'z-index: 11; top: 0; left: calc(50% + 100px); transform: rotate(-180deg); animation-delay: 1.55s;',
				style12: 'z-index: 12; top: 0; left: calc(50% + 125px); transform: rotate(-180deg); animation-delay: 1.6s;',

				style13: 'z-index: 13; top: 90px; left: calc(50% - 175px); transform: rotate(-180deg); animation-delay: 1.65s;',
				style14: 'z-index: 14; top: 90px; left: calc(50% - 150px); transform: rotate(-180deg); animation-delay: 1.7s;',
				style15: 'z-index: 15; top: 90px; left: calc(50% - 125px); transform: rotate(-180deg); animation-delay: 1.75s;',
				style16: 'z-index: 16; top: 90px; left: calc(50% - 100px); transform: rotate(-180deg); animation-delay: 1.8s;',
				style17: 'z-index: 17; top: 90px; left: calc(50% - 75px); transform: rotate(-180deg); animation-delay: 1.85s;',
				style18: 'z-index: 18; top: 90px; left: calc(50% - 50px); transform: rotate(-180deg); animation-delay: 1.9s;',
				style19: 'z-index: 19; top: 90px; left: calc(50% - 25px); transform: rotate(-180deg); animation-delay: 1.95s;',
				style20: 'z-index: 20; top: 90px; left: calc(50% - 0px); transform: rotate(-180deg); animation-delay: 2s;',
				style21: 'z-index: 21; top: 90px; left: calc(50% + 25px); transform: rotate(-180deg); animation-delay: 2.05s;',
				style22: 'z-index: 22; top: 90px; left: calc(50% + 50px); transform: rotate(-180deg); animation-delay: 2.1s;',
				style23: 'z-index: 23; top: 90px; left: calc(50% + 75px); transform: rotate(-180deg); animation-delay: 2.15s;',
				style24: 'z-index: 24; top: 90px; left: calc(50% + 100px); transform: rotate(-180deg); animation-delay: 2.2s;',
				style25: 'z-index: 25; top: 90px; left: calc(50% + 125px); transform: rotate(-180deg); animation-delay: 2.25s;',

				style26: 'z-index: 26; top: 180px; left: calc(50% - 175px); transform: rotate(-180deg); animation-delay: 2.3s;',
				style27: 'z-index: 27; top: 180px; left: calc(50% - 150px); transform: rotate(-180deg); animation-delay: 2.35s;',
				style28: 'z-index: 28; top: 180px; left: calc(50% - 125px); transform: rotate(-180deg); animation-delay: 2.4s;',
				style29: 'z-index: 29; top: 180px; left: calc(50% - 100px); transform: rotate(-180deg); animation-delay: 2.45s;',
				style30: 'z-index: 30; top: 180px; left: calc(50% - 75px); transform: rotate(-180deg); animation-delay: 2.5s;',
				style31: 'z-index: 31; top: 180px; left: calc(50% - 50px); transform: rotate(-180deg); animation-delay: 2.55s;',
				style32: 'z-index: 32; top: 180px; left: calc(50% - 25px); transform: rotate(-180deg); animation-delay: 2.6s;',
				style33: 'z-index: 33; top: 180px; left: calc(50% - 0px); transform: rotate(-180deg); animation-delay: 2.65s;',
				style34: 'z-index: 34; top: 180px; left: calc(50% + 25px); transform: rotate(-180deg); animation-delay: 2.7s;',
				style35: 'z-index: 35; top: 180px; left: calc(50% + 50px); transform: rotate(-180deg); animation-delay: 2.75s;',
				style36: 'z-index: 36; top: 180px; left: calc(50% + 75px); transform: rotate(-180deg); animation-delay: 2.8s;',
				style37: 'z-index: 37; top: 180px; left: calc(50% + 100px); transform: rotate(-180deg); animation-delay: 2.85s;',
				style38: 'z-index: 38; top: 180px; left: calc(50% + 125px); transform: rotate(-180deg); animation-delay: 2.9s;',

				animationData: {},
				randomNum:1,

			}

		},
		onLoad: function(option) {
			// const params = JSON.parse(decodeURIComponent(option.params));
			this.select_cards = this.tarotPics.tarotData;
			// this.xipaiAudioctx = uni.createInnerAudioContext();
			this.clickAudioCtx = uni.createInnerAudioContext();
			// this.xipaiAudioctx.src = 'https://static.supercreator.cn/tarot/xipai.wav';
			// this.xipaiAudioctx.play();
		},
		methods: {
			onShareAppMessage: function(res) {
			  return {
				title: '塔罗牌在线抽卡',
			  }
			},
			onClickOut() {
				//按钮特效
				this.clickAudioCtx.src = 'https://static.supercreator.cn/tarot/click.wav';
				this.clickAudioCtx.play();
				let platform = uni.getSystemInfoSync().platform
				uni.vibrateLong();
			},
			selectThis(a) {
				//触感反馈
				// this.onClickOut();
				
				if (this.select_pic) {
					uni.showToast({
						title: '今日已点击',
						icon: 'none',
						duration: 2000
					});
					return
				}
				
				this.randomNum = Math.floor(Math.random() * 2)
				if(this.randomNum === 0){
					// this.imageStyle = 'transform: scaleY(-1);'
					this.imageStyle = 'transform: rotate(180deg);'
					this.isFlag = -1
				}else{
					// this.imageStyle = 'transform: scaleY(1);'
					this.imageStyle = 'transform: rotate(0deg);'
					this.isFlag = 1
				}
				
				this.onClickOut();
				this.select_card = this.getRandomJsonElement(this.select_cards);
				console.log("aaaaa", this.select_card)
				this.select_pic = this.select_card.img
				this.select_idx = this.select_card.picIdx;
				this.active = 'active';
				this.select_img = 'select1';
			},
			getDynamicImagePath() {
				if (this.select_pic && this.select_idx >= 0) {
					if (this.select_idx < this.tarotPics.mainPageImgNum) {
						return require(`@/static/images/tarotImage/${this.select_pic}.jpeg`);
					} else {
						return require(`@/pageDay/static/tarotImage/${this.select_pic}.jpeg`);
					}
				} else {
					return null
				}
			},
			getRandomJsonElement(jsonArray) {
				// 随机生成一个0到数组长度减一的整数
				const randomIndex = Math.floor(Math.random() * jsonArray.length);
				// 返回对应的随机JSON对象
				var item = jsonArray[randomIndex];
				item.picIdx = randomIndex;
				return item;
			},

			goDetail() {
				if (!this.select_card.title) {
					uni.showToast({
						title: '请抽取一张牌',
						icon: 'none',
						duration: 2000
					});
					return
				}
				// uni.navigateTo({
				// 	url: '/pageDay/day/detail?key=' + this.select_card.title + '&idx=' + this.select_card.picIdx
				// })
				var picIdx = this.select_card.picIdx
				var tmp = {idList: [picIdx], formItem: {title: "今日运势"}, reverseList: [picIdx]};
				const params = encodeURIComponent(JSON.stringify(tmp));
				uni.navigateTo({url: '/pageDetail/detail/result/index?params=' + params});
			}




		}
	}
</script>

<style>
	page {
		width: 750upx;
		font-size: 24upx;
		height: 100vh;
		font-family: PingFangSC-Regular, Helvetica, Arial, sans-serif;
		box-sizing: border-box;
		background-position: top;
		background: linear-gradient(to bottom, #20254c 0%, #555555 100%);
		background-size: cover;
		background-origin: content-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750upx;
		height: 100%;
		position: relative;
		box-sizing: border-box;
	}

	@-webkit-keyframes pokeFadeIn {
		0% {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes pokeFadeIn {
		0% {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@-webkit-keyframes pokeRotate {

		0%,
		50% {
			-webkit-transform: translateY(45%) rotate(0deg) scale(1.5) rotateY(0deg);
			transform: translateY(45%) rotate(0deg) scale(1.5) rotateY(0deg);
		}

		to {
			-webkit-transform: translateY(45%) rotate(0deg) scale(1) rotateY(90deg);
			transform: translateY(45%) rotate(0deg) scale(1) rotateY(90deg);
		}
	}

	@keyframes pokeRotate {

		0%,
		50% {
			-webkit-transform: translateY(45%) rotate(0deg) scale(1.5) rotateY(0deg);
			transform: translateY(45%) rotate(0deg) scale(1.5) rotateY(0deg);
		}

		to {
			-webkit-transform: translateY(45%) rotate(0deg) scale(1) rotateY(90deg);
			transform: translateY(45%) rotate(0deg) scale(1) rotateY(90deg);
		}
	}

	@-webkit-keyframes pokeGotoCard1 {
		0% {
			top: 10%;
			width: 140px;
			height: 222px;
			margin-left: 0;
			-webkit-transform: translateX(0upx) rotateY(90deg);
			transform: translateX(0upx) rotateY(90deg);
		}

		50% {
			top: 15%;
			width: 140px;
			height: 222px;
			margin-left: 0;
			-webkit-transform: translateX(-155upx) rotateY(45deg);
			transform: translateX(-155upx) rotateY(45deg);
		}

		to {
			top: 445px;
			width: 140px;
			height: 220px;
			margin-left: 0;
			-webkit-transform: translateX(-320upx) rotateY(0deg);
			transform: translateX(-320upx) rotateY(0deg);
		}
	}


	.cardContent {
		position: relative;
		height: 100%;
		width: 750upx;
	}

	.cardContent .innerContent {
		position: relative;
		height: 100%;
	}

	.cardContent .tip {
		position: absolute;
		width: 100%;
		margin-top: 20px;
		text-align: center;
		font-size: 18px;
		color: #d6b47d;
	}

	.cardContent .cardView {
		position: relative;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		height: 100%;
		/* margin: 0 auto; */
	}

	.cardContent .cardView .poke {
		position: absolute;
		/* color: #fff; */
		left: 0;
		right: 0;
		width: 50px;
		height: 80px;
		background-image: url('@/static/images/poker-back.jpeg');
		background-size: 100%;
		-webkit-transition: all .6s;
		-o-transition: all .6s;
		transition: all .6s;
		-webkit-transform-origin: bottom;
		-ms-transform-origin: bottom;
		transform-origin: bottom;
		margin-top: -20upx;
		opacity: 0;
		-webkit-animation: pokeFadeIn .5s ease .01s normal forwards;
		animation: pokeFadeIn .5s ease .01s normal forwards;
	}

	.cardContent .cardView .poke.select {
		z-index: 80;
		height: 2.76rem;
		opacity: 1;
		-webkit-animation: pokeRotate .4s linear .01s normal forwards;
		animation: pokeRotate .4s linear .01s normal forwards;
	}

	.cardContent .cardView .cardImg {
		position: absolute;
		/* top: 400px; */
		margin-top: -32px;
		left: calc(100% - 100px);
		width: 140px;
		height: 222px;
		-webkit-transform: translateX(-64.48upx) rotateY(90deg);
		transform: translateX(-64.48upx) rotateY(90deg);
		z-index: 81;
		margin-left: 0;
	}

	.cardContent .cardView .cardImg image {

		border-radius: 10upx;
	}

	.cardContent .cardView .cardImg.select1 {
		-webkit-animation: pokeGotoCard1 1s linear .8s forwards;
		animation: pokeGotoCard1 1s linear .8s forwards;
		pointer-events: none;
	}



	.cardContent .cardRes {
		position: relative;
		width: 100%;
		height: 265upx;
		margin-top: 445px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cardContent .cardRes .resItem {
		width: 250upx;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.cardContent .cardRes .resItem.active .resItemName {
		opacity: 1;
		-webkit-transition: all 1.1s;
		-o-transition: all 1.1s;
		transition: all 1.1s;
		-webkit-transition-delay: 2.2s;
		-o-transition-delay: 2.2s;
		transition-delay: 2.2s;
	}

	.cardContent .cardRes .resItem .resItemTitle {
		font-size: 18px;
		color: #d6b47d;
		line-height: 30upx;
	}

	.cardContent .cardRes .resItem .resItemBg {
		opacity: .55;
		width: 140px;
		height: 222px;
		background: linear-gradient(to bottom, #20254c 0%, #555555 100%);
		background-position: 50%;
		background-size: 100% 150%;
		margin-top: 10px;
	}

	.cardContent .cardRes .resItem .resItemBg .img {
		width: 140px;
		height: 222px;
	}

	.cardContent .cardRes .resItem .resItemName {
		/* margin-top: 25px; */
		opacity: 0;
		display: inline-block;
		line-height: 30upx;
		/* font-size: 18px; */
		color: #d6b47d;
		white-space: nowrap;
		text-align: center;
		white-space: normal;
		letter-spacing: 0; /* 设置字间距为0 */
		line-height: 1.2; /* 设置行高 */
	}

	.taro-img__mode-scaletofill {
		object-fit: cover;
		width: 100%;
		height: 99% !important;
		margin-top: -13px;
	}

	

	.bottom-part {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		/* height: 100px; */
		flex: 1;
		z-index: 99;
		bottom: 160px;
		/* color: #fff; */
	}

	.btn-bg-animation {
		-webkit-animation: rotateAnimation 5s linear infinite;
		animation: rotateAnimation 5s linear infinite;
	}

	@keyframes rotateAnimation {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.start-btn-bg {
		width: 240rpx;
		height: 240rpx;
	}

	.start-btn {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		background-color: #e5d367;
		color: #000;
		text-align: center;
		line-height: 150rpx;
		font-size: 40rpx;
		font-weight: lighter;
	}
</style>